import React, { PureComponent } from 'react';
import { Modal, StyleSheet, Text, TouchableWithoutFeedback, View } from 'react-native';
import { SafeAreaProvider } from 'react-native-safe-area-context';
import SafeAreaView from 'react-native-safe-area-view';
import Popup from '../components/popup/popup';

export default class LoginPage extends PureComponent {

    constructor(props) {
        super(props);
    }

    render() {
        return (
            <Modal
                animationType="slide"
                visible={true}
                hardwareAccelerated={true}
                onRequestClose={() => Popup.destroy()}
            >
                <SafeAreaProvider>
                    <SafeAreaView style={styles.attribution}>
                        <View style={styles.container}>
                            <TouchableWithoutFeedback onPress={() => Popup.destroy()}>
                                <View style={{ margin: 22 }}>
                                    <Text style={{ fontSize: 16, color: '#fff' }}>退出</Text>
                                </View>
                            </TouchableWithoutFeedback>
                            <View style={styles.otherLogin}>
                                <View style={styles.wechat}>
                                    <Text style={styles.otherText}>微信登陆</Text>
                                </View>
                                <View style={styles.qq}>
                                    <Text style={styles.otherText}>QQ登陆</Text>
                                </View>
                            </View>
                        </View>
                    </SafeAreaView>
                </SafeAreaProvider>
            </Modal>
        );
    }
}

const styles = StyleSheet.create({
    attribution: {
        flex: 1,
        backgroundColor: '#000',
    },
    container: {
        flex: 1,
        backgroundColor: '#000000',
        flexDirection: 'column',
        justifyContent: 'space-between',
    },
    otherLogin: {
        flexDirection: 'row',
        marginBottom: 75,
        paddingHorizontal: 25,
    },
    wechat: {
        flex: 1,
        flexDirection: 'row',
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#00C576',
        color: '#fff',
        marginRight: 25,
        textAlign: 'center',
        height: 40,
        borderRadius: 20,
    },
    qq: {
        flex: 1,
        backgroundColor: '#56BFF8',
        color: '#fff',
        marginLeft: 25,
        textAlign: 'center',
        height: 40,
        borderRadius: 20,
        flexDirection: 'row',
        justifyContent: 'center',
        alignItems: 'center',
    },
    otherText: {
        textAlign: 'center',
        color: '#fff',
    },
});
